import React, { Component } from 'react';
import { SearchOutline } from 'antd-mobile-icons'
import '../../styles/BookShelf.scss'

class BookShelf extends Component {
    constructor() {
        super()
        this.state = {
            bookShelf: [
                {
                    pic: 'https://img0.baidu.com/it/u=2562646272,3484311479&fm=253&fmt=auto&app=138&f=JPEG?w=310&h=310', name: '人生哲理'
                },
                {
                    pic: 'https://img0.baidu.com/it/u=2562646272,3484311479&fm=253&fmt=auto&app=138&f=JPEG?w=310&h=310', name: '人生哲理'
                },
                {
                    pic: 'https://img0.baidu.com/it/u=2562646272,3484311479&fm=253&fmt=auto&app=138&f=JPEG?w=310&h=310', name: '人生哲理'
                },
                {
                    pic: 'https://img0.baidu.com/it/u=2562646272,3484311479&fm=253&fmt=auto&app=138&f=JPEG?w=310&h=310', name: '人生哲理'
                },
                {
                    pic: 'https://img0.baidu.com/it/u=2562646272,3484311479&fm=253&fmt=auto&app=138&f=JPEG?w=310&h=310', name: '人生哲理'
                },
                {
                    pic: 'https://img0.baidu.com/it/u=2562646272,3484311479&fm=253&fmt=auto&app=138&f=JPEG?w=310&h=310', name: '人生哲理'
                },
            ]
        }
    }
    render() {
        return (
            <div className='bookshelf'>
                <div className="header">
                    <span className='sou'><SearchOutline /></span>
                    <span>书架</span>
                    <span>编辑</span>
                </div>
                <div className="content">
                    <div>
                        {
                            this.state.bookShelf.map((item, index) => {
                                return (
                                    <div className="book" key={index}>
                                    </div>
                                )
                            })
                        }
                    </div>
                </div>
            </div>
        );
    }
}

export default BookShelf;